<!-- 设置时间 -->

<template>
  <div class="flex1 flexCC">
    <FormSelect v-bind="beginHourProps" @change="toChange" />
    <FormSelect v-bind="beginMinuteProps" @change="toChange" />
    <b>-</b>
    <FormSelect v-bind="endHourProps" @change="toChange" />
    <FormSelect v-bind="endMinuteProps" @change="toChange" />
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import props from './props'

const HOUR = Array(24).fill().map((_, i) => `0${i}`.slice(-2)).map((item) => [item, item])
const MINUTE = Array(60).fill().map((_, i) => `0${i}`.slice(-2)).map((item) => [item, item])

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'SettingTime',

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 开始时钟选项
     */
    beginHourProps() {
      const { obj } = this
      return {
        one: obj,
        bind: 'beginHour',
        dict: HOUR.filter(([hour]) => hour <= obj.endHour),
        tip: '时',
        noLabel: true,
        elProps: {
          'popper-class': 'DetailDisplayer-MySetting-select',
        },
      }
    },

    /**
     * 结束时钟选项
     */
    endHourProps() {
      const { obj, beginHourProps } = this
      return {
        ...beginHourProps,
        bind: 'endHour',
        dict: HOUR.filter(([hour]) => hour >= obj.beginHour),
      }
    },

    /**
     * 开始分钟选项
     */
    beginMinuteProps() {
      const { obj, beginHourProps } = this
      return {
        ...beginHourProps,
        bind: 'beginMinute',
        dict: MINUTE.filter(([minute]) => obj.beginHour < obj.endHour || minute <= obj.endMinute),
        tip: '分',
      }
    },

    /**
     * 结束分钟选项
     */
    endMinuteProps() {
      const { obj, beginMinuteProps } = this
      return {
        ...beginMinuteProps,
        bind: 'endMinute',
        dict: MINUTE.filter(([minute]) => obj.beginHour < obj.endHour || minute >= obj.beginMinute),
      }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 更新
     */
    toChange() {
      this.$emit('change', this.obj)
    },
  },
}
</script>
